<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        select {
            width: 200px;
            height: 200px;
            background-color: #33aacc;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <select id="all" multiple="multiple">
        <option>苹果</option>
        <option>橘子</option>
        <option>梨</option>
        <option>西瓜</option>
        <option>水蜜桃</option>
        <option>芒果</option>
    </select>

    <input type="button" value=">>>" id="btn3">
    <input type="button" value="<<<" id="btn4">
    <input type="button" value=">" id="btn1">
    <input type="button" value="<" id="btn2">
    <select id="select" multiple="multiple">

    </select>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function() {

            // console.log(len);
            // var len = my$("#all").children.length;

            $("#btn1").click(function() {
                // 找到所有选择的水果
                let arr = [];
                // 获取选择的水果

                for (let i = 0; i < $("#all")[0].children.length; i++) {
                    // 下拉列表元素
                    var option = $("#all")[0].children[i];
                    console.log(option);
                    // 判断是否被选中
                    if (option.selected) {
                        //如果选择就追加到数组arr;
                        arr.push(option);
                        option.selected = false; //把下拉列表中选中的元素移入新下拉列表时,需要让选中状态改变(相当于重置下拉列表的选中状态)
                    }
                }
                console.log(arr);
                // 将数组的元素添加到新下拉列表中
                for (let j = 0; j < arr.length; j++) {
                    var option = arr[j];
                    $("#select")[0].appendChild(option);
                }
            });

            $("#btn2").click(function() {
                // 找到所有选择的水果
                let arr = [];
                // 获取选择的水果

                for (let i = 0; i < $("#select")[0].children.length; i++) {
                    // 下拉列表元素
                    var option = $("#select")[0].children[i];
                    console.log(option);
                    // 判断是否被选中
                    if (option.selected) {
                        //如果选择就追加到数组arr;
                        arr.push(option);
                        option.selected = false; //把下拉列表中选中的元素移入新下拉列表时,需要让选中状态改变(相当于重置下拉列表的选中状态)
                    }
                }
                console.log(arr);
                // 将数组的元素添加到新下拉列表中
                for (let j = 0; j < arr.length; j++) {
                    var option = arr[j];
                    $("#all")[0].appendChild(option);
                }
            });

            // 全部右移
            $my("#btn3").onclick = function() {
                    // console.log();
                    var len = $my("#all").children.length;
                    for (let i = 0; i < len; i++) {
                        var option = $my("#all").children[i];
                        if (option.selected) {
                            option.selected = false;
                        }
                    }

                    for (let i = 0; i < len; i++) {
                        let option = $my("#all").children[0];
                        $my("#select").appendChild(option);
                    }
                }
                // 全部左移

            $my("#btn4").onclick = function() {
                // console.log();
                var len = $my("#select").children.length;
                for (let i = 0; i < len; i++) {
                    var option = $my("#select").children[i];
                    if (option.selected) {
                        option.selected = false;
                    }
                }

                for (let j = 0; j < len; j++) {
                    let option = $my("#select").children[0];
                    $my("#all").appendChild(option);
                }
            }


            function $my(select) {
                return document.querySelector(select);
            }
        })
    </script>
</body>

</html>